<template>
  <div>
  <div class='MkBreadcrumb'>
    <div class="return-btn" v-if="isReturn" @click="goReturn">
      <i class="el-icon-arrow-left"></i>
      <span>返回</span>
    </div>
    <el-breadcrumb separator=">">
      <span class="nav-icon" :class='breadcrumbData.menuIconStyle'></span>
      <template v-for="item in breadcrumbData.list">
        <el-breadcrumb-item v-if="item.path" :to="{path:item.path, query: item.query}" :key="item.path"
                            :class="{'click-able': item.isClickAble}"> {{item.name}}
        </el-breadcrumb-item>
        <el-breadcrumb-item v-else :key="item.path" :class="{'click-able': item.isClickAble}"> {{item.name}}
        </el-breadcrumb-item>
      </template>

    </el-breadcrumb>

    <span class="user-info">
      <el-dropdown trigger="click">
         <span class="el-dropdown-link">
             <!--<img class="user-avatar" :src="currentStaffData.avatar" alt=""/>-->
            <span class="user-name">{{ currentStaffData.name }}</span>
          <i class="el-icon-caret-bottom el-icon--right"></i>
        </span>
         <el-dropdown-menu slot="dropdown" class="user-info-dropdown-menu">
            <el-dropdown-item @click.native="passwordVisible = true">修改密码</el-dropdown-item>
            <el-dropdown-item @click.native="handleQuit">退出</el-dropdown-item>
          </el-dropdown-menu>
      </el-dropdown>

    </span>
    <!--<el-dropdown class="user-info">-->
        <!--<span class="el-dropdown-link">-->
          <!--&lt;!&ndash;<img class="user-avatar" :src="currentStaffData.staffAvatar" alt=""/>&ndash;&gt;-->
          <!--<span class="user-name">{{ currentStaffData.name }}</span>-->
          <!--<i class="el-icon-caret-bottom el-icon&#45;&#45;right"></i>-->
        <!--</span>-->
      <!--<el-dropdown-menu slot="dropdown">-->
        <!--<el-dropdown-item @click.native="passwordVisible = true">修改密码</el-dropdown-item>-->
        <!--<el-dropdown-item @click.native="handleQuit">退出</el-dropdown-item>-->
      <!--</el-dropdown-menu>-->
    <!--</el-dropdown>-->

  </div>
    <div style="height:10px;"></div>
    <el-dialog title="修改密码" top="10%" :visible.sync="passwordVisible" custom-class='dialogcenter password-box' width="460px" @close="closeDialog_updatePwd('passwordForm')">
      <el-form ref="passwordForm" :model="passwordForm" :rules="passwordRules" label-width="96px">
        <el-form-item label="原密码" prop="oldPassword">
          <el-input type="password" v-model="passwordForm.oldPassword" auto-complete="off" placeholder="请输入原密码（必填）"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input type="password" v-model="passwordForm.newPassword" auto-complete="off" placeholder="请输入新密码（必填）"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="ensurePassword">
          <el-input type="password" v-model="passwordForm.ensurePassword" auto-complete="off" placeholder="请确认新密码（必填）"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="editPassword">确 定</el-button>
        <el-button @click="cancelEditPassword">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import staffService from '../services/staff'
  import {mapState} from 'vuex'


  export default {
    name: 'breadcrumb',

    props: ['isReturn', 'breadcrumbData', 'returnUrl'],

    computed: mapState({
      currentStaffData: state => state.staff.loginedStaff
    }),

    mounted: function () {
    },

    data(){
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入新密码'));
        } else {
          if (this.passwordForm.oldPassword !== '' && this.passwordForm.newPassword === this.passwordForm.oldPassword) {
            callback(new Error('新密码与旧密码不能相同'));
          } else {
            callback();
          }
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入新密码'));
        } else if (value !== this.passwordForm.newPassword) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        passwordVisible: false,
        navIconSrc: '../assets/img/nav-menu-4.png',
        passwordForm: {
          oldPassword: '',
          newPassword: '',
          ensurePassword: '',
        },
        passwordRules: {
          oldPassword: [
            {required: true, message: "请输入原密码", trigger: 'blur'},
            {min: 6, max: 16, message: '长度为6至16个字符', trigger: 'blur'}
          ],
          newPassword: [
            {validator: validatePass, trigger: 'blur'},
            {min: 6, max: 16, message: '长度为6至16个字符', trigger: 'blur'}
          ],
          ensurePassword: [
            {validator: validatePass2, trigger: 'blur'},
            {min: 6, max: 16, message: '长度为6至16个字符', trigger: 'blur'}
          ]
        }
      }
    },

    methods: {
      goReturn () {
        if (this.returnUrl) {
          this.$router.push({path: this.returnUrl})
        } else {
          this.$router.go(-1);
        }

      },

      editPassword () {
        this.$refs['passwordForm'].validate((valid) => {
          if (valid) {
            let form = this.passwordForm;
            let param = {
              againPassword: form.newPassword,
              newPassword: form.newPassword,
              oldPassword: form.oldPassword,
            }
            staffService.modifyPassword(param, () => {
              this.$alert('修改密码成功,需要重新登录', '提示', {
                confirmButtonText: '确定',
                callback: action => {
                  window.location.href =  "/logout.htm";
                }
              });
            });
          }
        });
      },

      cancelEditPassword () {
        this.passwordVisible = false;
//        this.$refs['passwordForm'].resetFields();
      },

      handleQuit () {
        this.$confirm('此操作将退出登录, 是否继续?', '退出', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          customClass: 'confirmBox_warning'
        }).then(() => {
          window.location.href = "/logout.htm";
        }).catch(()=>{

        });
      },
      closeDialog_updatePwd(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

<style lang="less">
  @import '../assets/style/main.less';
  .MkBreadcrumb{
    position:relative;
    .my-box-shadow(0,0,6px,rgba(0,0,0,0.1));
    border-bottom:1px solid #f6f7f8;
    height: 80px;
    background-color: #fff;
    .el-breadcrumb {
      padding-left: 30px;
    }

    .el-breadcrumb__item__inner:hover, .el-breadcrumb__item__inner a:hover {
      color: @fontColorTwo;
    }
    .return-btn {
      width: 160px;
      float: left;
      line-height: 80px;
      text-align: center;
      color: @fontColorTwo;
      border-right: 1px solid @borderColor;
      &:hover {
        cursor: pointer;
        .my-opacity();
      }
      span {
        font-size: 16px;
      }
    }
    .el-breadcrumb {
      .my-box-shadow();
    }
    .nav-icon {
      margin: 29px 15px 0 30px;
      width: 24px;
      height: 24px;
      line-height: 92px;
      display:inline-block;
      float: left;
      background-repeat:no-repeat;
    }
    .routeIconStyle {
      background-image: url("../assets/img/bread-route.png");
    }

    .ticketIconStyle {
      background-image: url("../assets/img/bread-ticket.png");
    }

    .moneyIconStyle {
      background-image: url("../assets/img/bread-money.png");
    }

    .settingIconStyle {
      background-image: url("../assets/img/bread-setting.png");
    }

    .communityIconStyle{
      background-image: url("../assets/img/menu-logo.png");
      width: 54px;
      height: 57px;
      margin: 15px 15px 0 30px;
    }


    .el-breadcrumb .el-breadcrumb__inner{
      font-size: 16px;
      font-weight: normal;
      color: @fontColorTwo;
    }
    .el-breadcrumb .click-able .el-breadcrumb__inner {
      color: @fontColorTwo;
      &:hover {
        color: @primaryColor;
        cursor: pointer;
      }
    }
    .el-breadcrumb__item {
      line-height: 80px;
    }

    .user-info {
      min-width: 210px;
      max-width: 320px;
      height: 80px;
      border-left: 1px solid @borderColor;
      float: right;
      margin-top:-80px;
      /*margin-right:10px;*/
      .user-avatar {
        margin-top: 20px;
        margin-left: 30px;
        width: 40px;
        height: 40px;
        .my-border-radius(20px);
        float: left;
      }
      .user-name {
        /*padding-left: 20px;*/
        padding-left:70px;
        float: left;
        line-height: 80px;
      }
      .el-dropdown {
        width: 100%;
      }
      .el-dropdown-link {
        width: 100%;
        height: 80px;
        line-height: 80px;
        text-align: center;
        float: right;
        cursor: pointer;
      }
    }
  }
  .user-info-dropdown-menu {
    width: 140px!important;
    right: 40px;
    .my-box-sizing();
    .el-dropdown-menu__item {
      font-size: 14px;
      color: @fontColorTwo;
      &:hover {
        background-color: @hoverGreenColor;
      }
    }
  }
  .password-box {
    .el-dialog__headerbtn {
      top: 20px;
      i {
        font-size: 22px;
        color: @grayButton;
      }
    }
    .el-dialog__header {
      padding: 20px 40px;
      border-bottom: 1px solid @borderColor;
    }
    .el-dialog__body {
      padding: 30px 40px 10px 40px;
    }
    .el-dialog__footer {
      padding: 20px 40px;
      text-align: left;
      border-top: 1px solid @borderColor;
    }
  }
</style>

